{extend name="layout/layout" /}


{block name="style"}
	<style>
		.navbar{
			background: #fff;
			margin-top: 5px;
			line-height: 40px;
		}

		.navbar .active{
			background: #e60012;
			color:#fff;
		}

		.cancel{
			background: #e60012;
			color:#fff;
			font-size: 12px;
			padding: 0 5px;
			border-radius: 3px;
		}

	</style>
{/block}

{block name="main"}
	<div class="detail" v-cloak>
		<div class="navbar mui-row mui-text-center">
			<div class="nav-item mui-col-xs-6" :class="index==type_index?'active':''" v-for="t,index in type" @tap="changeType(index)">{{t.text}}</div>
		</div>


		<div class="box" id="box">
			<div class="">
				<ul class="mui-table-view" v-if="type[type_index]['list'].length > 0">
				    <li class="mui-table-view-cell mui-media" v-for="item, index in type[type_index]['list']">
				        <a href="javascript:;" @tap="detail(item.id)">
				            <img class="mui-media-object mui-pull-left" :src="item.img">
				            <div class="mui-media-body">
				                {{item.name}}
				                <p class='mui-ellipsis'>
				                	{{item.time}}
				                	<span class="mui-pull-right cancel" @tap.stop ="cancel(item, index)">取消收藏</span>
				                </p>
				            </div>
				        </a>
				    </li>
				</ul>

				<div class="no-data" v-else>没有相关数据</div>
			</div>
		</div>
	</div>
{/block}
{block name="navbar"}{/block}
{block name="script"}
	<script>
		mui.init({
		  pullRefresh : {
		    container:"#box",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
		    down : {
		      style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
		      color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
		      height:'50px',//可选,默认50px.下拉刷新控件的高度,
		      range:'100px', //可选 默认100px,控件可下拉拖拽的范围
		      offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
		      auto: false,//可选,默认false.首次加载自动上拉刷新一次
		      callback :function(){
		      	console.log('down');
		      	myVue.goodsList = [];
		      	myVue.page = 1;
		      	myVue.nextPage = false;
		      	// mui('#pullup-container').pullRefresh().refresh(true);

		      	myVue.getDetail();
		      	// mui('.group-goods').pullRefresh().endPulldown();
		      } //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
		    },
		    up : {
		      height:50,//可选.默认50.触发上拉加载拖动距离
		      auto:false,//可选,默认false.自动上拉加载一次
		      contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
		      contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
		      callback :function(){
		      	myVue.getDetail();
		      	this.endPullupToRefresh(myVue.type[myVue.type_index]['nextPage']);
		      } //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
		    }
		  }
		});

		var myVue = new Vue({
			el:'.detail',
			data:{
				type_index:0,
				type: [
					{
						id: 1,
						text: '商品',
						page:1,
						list:[],
						nextPage: false
					},
					{
						id:2,
						text:'商家',
						page:1,
						list:[],
						nextPage: false
					}
				]
			},
			mounted: function(){
				if(token){
					this.token = token;
					console.log(this.token);
					this.getDetail();
				} else {
					this.login();
				}

			},
			methods: {
				getDetail: function(){
					layer.open({
						type:2,
						shadeClose:false,
						shade: 'background-color: rgba(0,0,0,.3)',
					});
					var url =  'favorite/index';
					var that = this;
					var type = that.type[that.type_index];
					request(that, {'url': url, 'data': {type: type.id, page: type.page}}, function(res){
						layer.closeAll();
						if(res.code == 200) {
							type.list = type.list.concat(res.data);
							type.page++;
							if(res.data.length < 20) {
								type.nextPage = true;
							}
						} else {
							mui.toast(res.msg);
						}	
					});
				},
				login:function(){
					location.href = '/mobile/user/login';
				},
				changeType: function(index){
					this.type_index = index;
					this.getDetail();
				},
				//查看详情
				detail: function(id){
					if(this.type_index == 0){
						location.href = '/mobile/goods/detail?id='+id;
					} else {
						location.href = '/mobile/business/index?id='+id;
					}
				},
				//取消收藏
				cancel: function(item, index){
					var url =  'favorite/cancel';
					var that = this;
					request(that, {'url': url, 'data': {type: item.type, id: item.id}}, function(res){
						if(res.code == 200) {
							that.type[that.type_index]['list'].splice(index,1);
						}	
						mui.toast(res.msg);
					});
				}
			}
		});
	</script>
{/block}